<template>
    <div class="type-box">
        <!-- 头部导航 top-nav -->
        <div class="top-nav">
            <van-icon  size="20px" name="setting-o" />
            <van-icon  class="lic" size="20px" name="envelop-o" />
        </div>
        <!-- 头部 top -->
        <div class="top">
            <span>{{name}}</span>
            <div>
                <van-icon  name="user-circle-o" size="50px"/>
            </div>
        </div>
        <!-- 导航 nav -->
        <div class="nav">
            <van-button type="primary">￥0<br>账户余额</van-button>
            <van-button type="info">￥0<br>我的积分</van-button>
            <van-button type="warning">￥0<br>商户余额</van-button>
            <van-button type="danger">￥0<br>信用积分</van-button>
        </div>
        <!-- 我的订单 order -->
        <div class="order">
            <div>
                <span class="texta">我的订单</span>
                <span class="textb">查看全部订单 ></span>
            </div>
            <van-grid>
                <van-grid-item icon="photo-o" text="待付款" />
                <van-grid-item icon="send-gift-o" text="待收货" />
                <van-grid-item icon="exchange" text="退换" />
                <van-grid-item icon="comment-circle-o" text="申诉" />
            </van-grid>
        </div>
        <!-- 列表页 lista -->
        <div class="lista">
            <ul>
                <li>拼团订单<span>></span></li>
                <li>秒杀订单<span>></span></li>
                <li>抢购订单<span>></span></li>
                <li>我的分销<span>></span></li>
                <van-divider :style="{ color: '#888686', borderColor: '#888686', padding: '0 16px' }"/>
            </ul>
            
             <ul>
                <li>红包<span>></span></li>
                <li>消费券<span>></span></li>
                <li>优惠券<span>></span></li>
                <van-divider :style="{ color: '#888686', borderColor: '#888686', padding: '0 16px' }"/>
            </ul>
        </div>
        <!-- 底部导航 bottom-nav -->
        <div class="bottom-nav">
            <van-grid :column-num="4">
                <van-grid-item icon="location-o" text="地址管理" />
                <van-grid-item icon="like-o" text="我的收藏" />
                <van-grid-item icon="friends-o" text="邀请好友" />
                <van-grid-item icon="service-o" text="客服中心" />
                <van-grid-item icon="newspaper-o" text="帮助文章" />
                <van-grid-item icon="envelop-o" text="用户反馈" />
                <van-grid-item icon="question-o" text="常见问题" />
                <van-grid-item icon="flag-o" text="商户入驻" />
            </van-grid>
        </div>
        <van-button @click="quit" type="primary" color="linear-gradient(to right, #ff6034, #ee0a24)" block>退出登录</van-button>
    </div>
</template>

<script>
export default {
    data() {
        return {
            name: ''
        }
    },
    created() {
        let nav = this.$store.getters['common/user']
        this.name = nav.name
    },
    methods: {
        quit() {
            this.$store.commit('common/mutationUser','')
            this.$store.commit('common/mutationToken','')
            this.$router.push('/login')
        }
        
    }

}
</script>

<style lang="less" scoped>
    .type-box {
        display: block;
        position: relative;
        height: calc(100% - 50px);
        width: 100%;
        background-color: rgb(255, 255, 255);
        overflow-x: hidden;
        .top-nav {
            margin: 10px 0;
            width: 100%;
            height: 30px;
            text-align: right;
            .lic {
                margin: 0 20px;
            } 
        }
        .top {
            height: 60px;
            width: 100%;
            margin: 10px 0;
            > span {
               display: block;
               float: left;
               margin: 0 20px;
               margin-top: 20px;
            }
            > div {
                float: right;
                margin: 0 20px;
                margin-top: 10px;
            }
        }
        .nav {
            width: 100%;
            height: 60px;
            display: flex;
            justify-content: space-evenly;
            align-items: center;
        }
        .order {
            width: 100%;
            height: 24%;
            margin: 20px 0;
            display: flex;
            flex-direction: column;
            > div {
                height: 40px;
                width: 100%;
                float: none;
                margin: 10px 0;
                .texta {
                    float: left;
                    line-height: 40px;
                    font-size: 18px;
                    margin-left: 20px;
                }
                .textb {
                    float: right;
                    line-height: 40px;
                    margin-right: 20px;
                    font-size: 14px;
                    color: #a0a0a0;   
                }
            }
        }
        .lista {
            width: 100%;
            height: 50%;
            margin-top: 20px;
            ul {
                margin-top: 20px;
                li {
                    margin: 20px 20px;
                    font-size: 16px;
                    span {
                        float: right;
                    }
                }
            }
        }
        .bottom-nav {
            margin: 20px;
        }
    }
    
</style>